<script lang="ts" name="Icons" setup>
import { AppState, GlobalConfig } from '@/injectKey'
import { ElMessage } from 'element-plus'

const { ElIcons } = inject(AppState) as GlobalConfig

const props = defineProps({
  isCopy: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['chooseIcon'])

const currentIcon = ref<string>('')

const chooseIcon = (item: string) => {
  currentIcon.value = item
  if (props.isCopy) {
    navigator.clipboard
      .writeText(`<${item}/>`)
      .then(() => {
        ElMessage.success(`<${item}/> 组件复制成功🎉`)
      })
      .catch((err) => {
        console.error('无法复制：', err)
      })
  }
  emits('chooseIcon', item)
}
</script>

<template>
  <div class="icons_list">
    <template v-for="item in ElIcons" :key="item">
      <div class="icons_item flex jsb col" @click="chooseIcon(item)">
        <el-icon><component :is="item" /></el-icon>
        <span class="icons_name">{{ item }}</span>
      </div>
    </template>
  </div>
</template>

<style lang="less" scoped>
.icons_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;

  .icons_item {
    border-radius: 6px;
    border: var(--el-border);
    padding: 10px;
    cursor: pointer;

    &:hover {
      background: var(--el-bg-color-overlay);
    }

    :deep(.el-icon) {
      font-size: 24px;
    }

    span {
      font-size: 13px;
      line-height: 1rem;
      margin-top: 1rem;
    }
  }
}
</style>
